<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情页</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/details.css">
    <script src="./js/details.js"></script>
</head>

<body>
    <!-- 1.头部 -->
    <div id="header">
        <!-- 版心 -->
        <div class="wrap clearfix posrel">

            <!-- 加载log图片 -->
            <div class="header_logimg posabs">
                <img src="./img/log1.png">
            </div>

            <!-- 左边文字 -->
            <div class="header_leftcn fl ">
                legochina.cn
            </div>

            <!-- 右边文字 -->
            <div class="header_right fr">
                欢迎光临
                <a style="color: #ff6600; text-decoration:none;" href="#">乐购</a>,请&ensp;登陆\
                <a style="color: #ff6600; text-decoration:none;" href="login.html">注册</a>
            </div>
        </div>
    </div>
    <!-- 2.菜单 -->
    <div id="container">

        <!-- 版心 -->
        <div class="wrap">

            <!-- 搜索框+购物车 -->
            <div class="searchBox clearfix">

                <!-- 购物车 -->
                <div class="shopCar clearfix fr">

                    <!-- 购物车 -->
                    <div class="car fl">
                        <div class="car_img">
                        </div>
                        <span class="car_cn posrel"> <a href="car.html" style="text-decoration: none;">购物车&ensp;3</a></span>
                    </div>

                    <!-- 订单 -->
                    <div class="order fl">
                        我的订单
                    </div>
                </div>

                <!-- 搜索框 -->
                <div class="search fr">
                    <div class="seek clearfix">

                        <!-- 输入框 -->
                        <input type="text" placeholder="创意文具" class="hunt fl" id="oldInput">
                        <!-- 加载搜索图片 -->
                        <div class="search_img fl posrel">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 目录 -->
            <ul class="menu">
                <li class="fl">
                    <a href="#">图书</a>
                </li>
                <li class="fl">
                    <a href="#">电子书</a>
                </li>
                <li class="fl">
                    <a href="#">原创文学</a>
                </li>
                <li class="fl">
                    <a href="#">服装</a>
                </li>
                <li class="fl">
                    <a href="#">运动户外</a>
                </li>
                <li class="fl">
                    <a href="#">孕婴童</a>
                </li>
                <li class="fl">
                    <a href="#">家居</a>
                </li>
                <li class="fl">
                    <a href="#">创意文具</a>
                </li>
                <li class="fl">
                    <a href="#">地方特产</a>
                </li>
                <li class="fl">
                    <a href="#">海外购</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 3.图书 -->
    <div id="ebook">
        <div class="wrap">
            <span class="ebook_titleBox">
                <span class="ebook_title">图书</span> > 小说 > 情感/家庭/婚姻 > 博集天卷 > 她和他</span>
            <!-- /* 3.图书盒子 */    -->
            <div class="ebookBox clearfix">
                <!-- 左边盒子 -->
                <div class="ebook_leftBox fl">
                    <!-- 上面的图片 -->
                    <div class="ebook_leftBox_img">
                        <div class="img_item show">
                            <img src="./img/book1.jpg" alt="">
                        </div>
                        <div class="img_item">
                            <img src="./img/book2.jpg" alt="">
                        </div>
                        <div class="img_item">
                            <img src="./img/book3.jpg" alt="">
                        </div>
                    </div>
                    <!-- 下面的选项图片以及按钮 -->
                    <div class="ebook_leftBox_minimg clearfix">
                        <div class="ebook_leftBox_leftBtn fl"></div>
                        <div class="ebook_leftBox_imgBox fl clearfix">
                            <div class="ebook_leftBox_minImg fl active">
                                <img src="./img/book1.jpg" alt="">
                            </div>
                            <div class="ebook_leftBox_minImg fl">
                                <img src="./img/book2.jpg" alt="">
                            </div>
                            <div class="ebook_leftBox_minImg fl">
                                <img src="./img/book3.jpg" alt="">
                            </div>
                        </div>
                        <div class="ebook_leftBox_rightBtn fl"></div>
                    </div>
                    <span>商品编号：11950959</span>
                </div>
                <!-- 右边盒子 -->
                <div class="ebook_rightBox fr">
                    <!-- 头部文字盒子 -->
                    <div class="ebook_rightBox_titleBox">
                        <p class="ebook_rightBox_toptitle">她和他</p>
                        <p class="ebook_rightBox_title">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                        <p class="ebook_rightBox_bottomtitle">
                            [法] 马克·李维 著；杨亦雨 译
                        </p>
                    </div>
                    <!-- 价格盒子 -->
                    <div class="ebook_rightBox_priceBox posrel">
                        <div class="ebook_rightBox_minpriceBox">
                            <span style="font-size: 16px;color: #6c6c6c;">乐 购 价：</span>
                            <span style="color:#f80e0e;font-size: 24px;">￥26.20</span>
                            <span style="font-size: 16px;color: #6c6c6c;">[6.9折] [定价：￥38.00] (降价通知)</span>
                            <p>
                                <span style="font-size: 16px;color: #6c6c6c;">促销信息：</span>
                                <span style="color:#f80e0e;font-size: 16px;">满减 每满150.00元，可减50.00元现金</span>
                                <span style="font-size: 16px;color: #6c6c6c;">详情 >></span>
                            </p>
                            <div class="ebook_rightBox_ticket clearfix">
                                <span class="fl" style="font-size: 16px;color: #6c6c6c;">领&emsp;券：</span>
                                <div class="ebook_rightBox_ticketimg fl  posrel">
                                    <img src="./img/Q.png" alt="">
                                    <span>100-6</span>
                                </div>
                                <div class=" ebook_rightBox_ticketimgs fl  posrel">
                                    <img src="./img/Q.png" alt="">
                                    <span>100-6</span>
                                </div>
                            </div>
                        </div>
                        <!-- 评价 -->
                        <div class="ebook_rightBox_evaluate posabs">
                            <span style="color: #949494;font-size: 16px;">累计评价</span>
                            <p style="color: #ff6600;font-size: 18px">99999</p>
                        </div>
                    </div>
                    <!-- 种类盒子 -->
                    <div class="ebook_rightBox_kind clearfix">
                        <!-- 选择 -->
                        <span class="ebook_rightBox_kindtitle fl">种类选择：</span>
                        <div class="ebook_rightBox_leftkind fl kind_active">
                            <!-- 165px -->
                            平装版
                        </div>
                        <div class="ebook_rightBox_rightkind fl ">
                            <!-- 275px -->
                            精装版
                        </div>
                        <div class="ebook_rightBox_rightkindimg">
                            <img src="./img/select.png" alt="">
                        </div>
                    </div>
                    <!-- 数量选择盒子 -->
                    <div class="ebook_rightBox_numBox clearfix ">
                        <input type="text" class="ebook_rightBox_num fl" value="1">
                        <div class="ebook_rightBox_plus fl">+</div>
                        <div class="ebook_rightBox_minus fl posrel">-</div>
                    </div>
                    <!-- 加入购物车 -->
                    <div class="ebook_rightBox_shopCar posrel">
                        加入购物车
                    </div>
                    <div style="font-size: 16px;line-height: 35px;color: #808080;position: relative;top:-7px;left: 8px;">温馨提示：支持7天无理由退货</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 4.人气单品 -->
    <div id="popular">
        <!-- 版心 -->
    <div class="wrap">
         <!-- 标题盒子 -->
    <div class="popular_titleBox">
            <!-- 文本盒子 -->
            <div class="popular_textBox">
                <!-- 标题 -->
                <div class="popular_text">
                    人气单品
                </div>
            </div>
            <!-- 内容盒子 -->
            <div class="popular_titlemainBox clearfix">
                <!-- 推荐图书 -->
                <script>
                let popular = `
                <div class="popular_ebookBox fl">
                    <div class="popular_ebookBox_imgBox">
                        <img src="./img/whitenight.jpg" alt="">
                    </div>
                    <div class="popular_ebookBox_miniimg">
                        <img src="./img/8price.png" alt="">
                    </div>
                    <div class="popular_ebookBox_mainBox">
                            白夜行  东野圭吾
                    </div>
                    <!-- 推荐 -->
                    <div class="popular_ebookBox_nominal clearfix posrel">
                        <div class="popular_ebookBox_nominaltext fl">
                            推荐:
                            <!-- 星星 -->
                            <div class="popular_ebookBox_nominalimg fl clearfix posabs ">
                             <img class="fl" src="./img/cover.png" alt="">
                             <img class="fl" src="./img/cover.png" alt="">
                             <img class="fl" src="./img/cover.png" alt="">
                             <img class="fl" src="./img/cover.png" alt="">
                             <img class="fl" src="./img/half.png" alt="">
                         </div>
                        </div>
                         
                         <!-- 价格盒子 -->
                         <div class="popular_ebookBox_priceBox clearfix posrel">
                             <div class="popular_ebookBox_leftBox fl posabs">￥:38</div>
                             <div class="popular_ebookBox_rightBox fr posabs">￥:58</div>
                         </div>
                    </div>
                </div>
                `
                for(i=0;i<5;i++){
                    document.write(popular);
                }
                </script>
            </div>
        </div>
         <!-- 内容盒子 -->
  <div class="popular_mainBox clearfix">
      <!-- 左边盒子 -->
        <div class="popular_mainBox_leftBox fl">
            <!-- 头部文字 -->
            <div class="popular_mainBox_titleBox">看了又看</div>
            <div class="popular_mainBox_imgBox clearfix">
                    <!-- 推荐图书 -->
                    <script>
                    let imgBox = `
                    <div class="popular_mainBox_ebookBox fl">
                        <div class="popular_mainBox_ebookBox_imgBox">
                            <img src="./img/whitenight.jpg" alt="">
                        </div>
                        <div class="popular_ebookBox_miniimg">
                            <img src="./img/8price.png" alt="">
                        </div>
                        <div class="popular_ebookBox_mainBox">
                                白夜行  东野圭吾
                        </div>
                        <!-- 推荐 -->
                        <div class="popular_ebookBox_nominal clearfix posrel">
                            <div class="popular_ebookBox_nominaltext fl">
                                推荐:
                                <!-- 星星 -->
                                <div class="popular_ebookBox_nominalimg fl clearfix posabs ">
                                 <img class="fl" src="./img/cover.png" alt="">
                                 <img class="fl" src="./img/cover.png" alt="">
                                 <img class="fl" src="./img/cover.png" alt="">
                                 <img class="fl" src="./img/cover.png" alt="">
                                 <img class="fl" src="./img/half.png" alt="">
                             </div>
                            </div>
                             
                             <!-- 价格盒子 -->
                             <div class="popular_ebookBox_priceBox clearfix posrel">
                                 <div class="popular_ebookBox_leftBox fl posabs">￥:38</div>
                                 <div class="popular_ebookBox_rightBox fr posabs">￥:58</div>
                             </div>
                        </div>
                    </div>
                    `
                    for(i=0;i<7;i++){
                        document.write(imgBox);
                    }
                    </script>
                </div>
        </div>
        <!-- 右边盒子 -->
        <div class="popular_mainBox_rightBox fl">
        <!-- 头部文字 -->
        <ul class="popular_mainBox_righttitle">
         <li class="fl">商品介绍</li>
         <li class="fl popular_active">评价9999</li>
        </ul>
        <!-- 选项卡 -->
        <ul class="popular_main">
            <!-- 商品介绍 -->
           <li class="popular_products">
           <div class="rightBox"> 
               <img src="./img/mainleft.png" alt="">
               <div class="textBox">
                   <p>作品简介</p>
                   <p>她叫米娅，来自英国，当红女演员，却只想远离萧瑟的伦敦，聆听感动与欢笑的话语。</p>
                    <p>他叫保罗，来自美国，曾经的建筑设计师，因为一本书一炮而红，却无法适应他人追逐的目光。他隐身于</p>
               <p>巴黎，只能与自己小说中的人物结为挚友。</p>
               <p>米娅的事业非常成功，保罗却一直郁郁不得志。保罗幽默风趣，米娅却不善与人交际。她很孤单，他也一</p>
                <p>直如此。缘于朋友善意的恶作剧，米娅和保罗相识于社交网络，却没有成为恋人，他们发展出很好的友谊</p>
             <p>，并试图将友情一直维持下去。</p>
             <p>然而，一些意想不到的事情发生了......</p>
            </div>
        </div>
           </li>
           <!-- 评价 -->
           <li class="popular_products popular_show">
               <!-- 评价 -->
             <div class="evaluate clearfix">
                 <!-- 好评度 -->
               <div class="reputation fl">
                   <span style="font-size:50px; color: #f8380c;">98%</span><span style=" position: relative;right:-45px;bottom: 0;">好评度</span>
               </div>
               <!-- 进度条 -->
               <div class="progress fl">
                   <!-- 好评 -->
                   <div class="progress_god clearfix posrel">
                       <!-- 文字 -->
                       <div class="progress_god_text fl ">好评（98%）</div>

                       <div class="fl progress_god_barbottom posabs"></div>
                       <div class="fl progress_god_bartop posabs"></div>
                   </div>
                   <div class="progress_god clearfix posrel">
                        <!-- 文字 -->
                        <div class="progress_god_text fl ">中评（2%）</div>
 
                        <div class="fl progress_god_barbottom posabs"></div>
                        <div class="fl progress_god_bartop posabs"></div>
                    </div>
                    <div class="progress_god clearfix posrel">
                            <!-- 文字 -->
                            <div class="progress_god_text fl ">差评（0%）</div>
     
                            <div class="fl progress_god_barbottom posabs"></div>
                            <div class="fl progress_god_bartop posabs"></div>
                        </div>
               </div>
               <!-- 分数 -->
               <div class="grade fl clearfix">
               <div class="grade_num fl clearfix">
                   <div class="fl name">
                       <script>
                        var num ='张三小学生';

                        var ss = `
                       ${ num[0]}**${num[num.length-1]}
                        `
                        document.write(ss);
                     </script>
                   </div>
                   <div class="fr name">0</div>
               </div>
               <div class="grade_num fl clearfix">
                    <div class="fl name">
                        <script>
                         var num ='张三小学生';
 
                         var ss = `
                        ${ num[0]}**${num[num.length-1]}
                         `
                         document.write(ss);
                      </script>
                    </div>
                    <div class="fr name">0</div>
                </div>
                <div class="grade_num fl clearfix">
                        <div class="fl name">
                            <script>
                             var num ='张三小学生';
     
                             var ss = `
                            ${ num[0]}**${num[num.length-1]}
                             `
                             document.write(ss);
                          </script>
                        </div>
                        <div class="fr name">0</div>
                    </div>
                    <div class="grade_num fl clearfix">
                            <div class="fl name">
                                <script>
                                 var num ='张三小学生';
         
                                 var ss = `
                                ${ num[0]}**${num[num.length-1]}
                                 `
                                 document.write(ss);
                              </script>
                            </div>
                            <div class="fr name">0</div>
                        </div>
               </div>
             </div>
             <!-- 全部评价 -->
             <div class="all_evaluate">
             <span style="color: #f8380c; margin-left:22px; ">全部评价（9999）</span>
             <span>好评（888）</span>
             <span>中评（888）</span>
             <span>差评（888）</span>
             </div>
             <!-- 详情 -->
             <script>
             let html = `
             <div class="particulars">
                 <!-- 整个大盒子 -->
                 <div class="particulars_minbox clearfix">
                     <!-- 左边星星盒子 -->
                <div class="particulars_minbox_leftbox fl">
                    <div class="star_imgbox">
                    <div class="star"></div>
                    <div class="redstar"></div>
                </div>
                <p style="font-size: 14px;color: #a6a6a6;">下单后5天评论</p>
                <p style="font-size: 14px;color: #a6a6a6;">2016-08-11</p>
                </div>
                <!-- 中间文本盒子 -->
                <div class="particulars_minbox_textbox fl">
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                        键是价格真给力
                </div>
                <!-- 右边盒子 -->
                <div class="particulars_minbox_rightbox fl">
                    <!-- 头像+名字 -->
                    <div class="icon clearfix ">
                        <img src="./img/icm.png" alt="">
                        <span>张**生</span>
                    </div>
                    <span style="color: #f4b212;font-size: 14px;">金牌会员</span>
                    <p style="color: #808080;font-size: 14px;">来自iPhone客户端</p>
                </div>
                 </div>
             </div>
             `
             for(let i = 0;i<12;i++){
                 document.write(html);
             }
             </script>
             <!-- 下一页 -->
            <div class="nexpage fr clearfix">
                <button class="fl">1</button>
                <button class="fl">2</button>
                <button class="fl">3</button>
                <button class="fl">4</button>
                <button class="fl">5</button>
                <button class="fl">6</button>
                <div class="fl" style="width: 26px;
                height: 2px; position: relative;top:16px;
                left: 0;">.....</div>
                <button class="fl">下一页</button>
                
            </div>
        </li>
        </ul>
        </div>
    </div>
    </div>  
    </div>
    <div id="img">
       <div class="wrap">
        <img src="./img/footer.png" alt="">
    </div>
    </div>
    <!-- 11.页脚 -->
    <div id="footer">
        <div class="footer_img posrel">
            <div class="imgBox posabs">
                <img src="./img/footer-left.png" alt="">
                <img src="./img/footerleft.png" alt="">
                <img src="./img/footerright.png" alt="">
                <img src="./img/footer-right.png" alt="">
            </div>
        </div>
        <div class="footertitlebox clearfix">
            <div class="footerleft fl">
                <p class="f18 c00">购物指南</p>
                <p class="f16 c66">购物流程</p>
                <p class="f16 c66">发票制度</p>
                <p class="f16 c66">账户管理</p>
                <p class="f16 c66">会员优惠</p>
            </div>

            <div class="footerleft fl">
                <p class="f18 c00">支付方式</p>
                <p class="f16 c66">货到付款</p>
                <p class="f16 c66">网上支付</p>
                <p class="f16 c66">礼品卡支付</p>
                <p class="f16 c66">银行转帐</p>
            </div>
            <div class="footerleft fl">
                <p class="f18 c00">订单服务</p>
                <p class="f16 c66">订单配送查询</p>
                <p class="f16 c66">订单状态说明</p>
                <p class="f16 c66">自助取消订单</p>
                <p class="f16 c66">自助修改订单</p>
            </div>
            <div class="footerleft fl">
                <p class="f18 c00">退换货</p>
                <p class="f16 c66">退换货政策</p>
                <p class="f16 c66">自助申请退换货</p>
                <p class="f16 c66">退换货进度查询</p>
                <p class="f16 c66">退款方式和时间</p>
            </div>
            <div class="footerleft fl">
                <p class="f18 c00">商家服务</p>
                <p class="f16 c66">商家中心</p>
                <p class="f16 c66">运营服务</p>
                <p class="f16 c66">账户管理</p>
                <p class="f16 c66">加入尾品汇</p>
            </div>
        </div>
        <div class="footersynopsis">
            <span>公司简介&emsp;|&emsp;Investor Relations&emsp;|&emsp;网站联盟&emsp;|&emsp;乐购招商&emsp;|&emsp;机构销售&emsp;|&emsp;手机乐购&emsp;|&emsp;官方Blog&emsp;|&emsp;热词搜索</span>
        </div>
        <div class="footer_footertitle">
            <span>Copyright&emsp;(C)&emsp;乐购网&emsp;2004-2016,&emsp;All Rights Reserved</span>
        </div>
        <div class="footer-footerimg posrel">
            <img src="./img/logo_00.png" alt="">
        </div>
    </div>
</body>
</html>